<template>
  <div class="div_box">
    <!-- 使用 v-if 来控制 el-dialog 的显示和销毁 -->
    <el-dialog title="视频详情" :visible.sync="dialogVisible" v-if="dialogVisible" width="1200px" top="8vh"
      :close-on-click-modal="false" @close="cancelAddDia" :modal-append-to-body="false" :modal="true">
      <span slot="title" class="dialog-title">
        <div class="title">视频详情</div>
      </span>
      <div class="div_left">
        <div class="camara_box">
          <!-- <div style="
              height: 60vh;
              background: black;
              position: relative;
              width: 100%;
            "> -->
          <div id="265Player" v-if="codec === 1 || codec === 2" class="camara_video"></div>
          <div class="none" :style="noneTest=='设备连接失败,请重试'?'color:red':'color: #cfd3ec38;'">{{ noneTest }}</div>
          <!-- </div> -->
        </div>

        <div class="webplayer_menu">
          <div class="webplayer-menu--left">
            <el-tooltip class="item" effect="dark" content="播放" placement="bottom" v-show="isPause">
              <i class="el-icon-video-play" id="playerResumeButton" @click="isPause = false"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="暂停" placement="bottom" v-show="!isPause">
              <i class="el-icon-video-pause" id="playerPauseButton" style="color: #7367f0" @click="isPause = true"></i>
            </el-tooltip>
          </div>
          <div class="webplayer-menu--right">
            <el-dropdown trigger="click" @command="onDropdown">
              <span class="el-dropdown-link">
                <el-tooltip class="item" effect="dark" content="灯光控制" placement="bottom">
                  <i class="iconfont dengguang1" style="color: #7367F0;" v-if="lamplight == 'light_on'"></i>
                  <i class="iconfont guanbidengguang1" style="color: #7367F0;" v-else-if="lamplight == 'light_off'"></i>
                  <i class="iconfont icon-zhaoming" style="color: #7367F0;" v-else-if="lamplight == 'light_auto'"></i>
                </el-tooltip>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="light_on">
                  开灯
                </el-dropdown-item>
                <el-dropdown-item command="light_off">关灯
                </el-dropdown-item>
                <el-dropdown-item command="light_auto">
                  自动
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tooltip class="item" effect="dark" content="180度翻转" placement="bottom">
              <i class="iconfont icon-xuanzhuan" @click="cloudControl('reverse')"
                style="color: #7367F0;margin-left: 28px;"></i>
            </el-tooltip>

            <!-- <i class="iconfont huatong" id="audioTalkStop"  @click="ezopenStopTalk"
                        v-show="!startTalkshow"></i>
                    <i class="iconfont huatong1" id="audioTalkStart" @click="ezopenStartTalk" v-show="startTalkshow"></i>

                    <i class="iconfont guanbiyinliang" @click="openSound" v-show="openSoundPromiseshow"></i>
                    <i class="iconfont zengdayinliang" @click="closeSound" 
                        v-show="!openSoundPromiseshow"></i>-->
            <!-- <el-tooltip class="item" effect="dark" content="事件回放" placement="bottom">
                        <i class="iconfont shijianhuifang" @click="onplayback" style="color: #7367F0;"></i>
                    </el-tooltip> -->
          </div>
        </div>

        <div class="div_right">
          <div class="video-ctrl-box">
            <i class="el-icon-caret-left" @click="cloudControl('spin_left')"></i>
            <i class="el-icon-caret-right" @click="cloudControl('spin_right')"></i>
            <i class="el-icon-caret-bottom" @click="cloudControl('spin_bottom')"></i>
            <i class="el-icon-caret-top" @click="cloudControl('spin_top')"></i>
            <div class="ctrl-circle">控制台</div>
          </div>
        </div>

        <!-- <div class="playback">
          <div v-for="(item, index) in playList" :key="index">
            <div style="margin-bottom: 10px;">
              <i class="iconfont shijian" style="color: #7367F0;margin-right: 5px;"></i>
              {{ item.createTime }}
            </div>
            <video controls :src="item.url"></video>
          </div>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqAlarmPlay, reqPlayList } from "@api/api.js";
import { log } from "ezuikit-js";

export default {
  props: [],
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      isPause: true,
      isLoading: false,
      player: null,
      t: null,
      url: "",
      server_ip: "",
      timer: "",
      codec: 1,
      play_token: "",
      token: "",
      stopPromiseshow: true,
      alarmPlayFlag: false,
      playList: [],
      lamplight: "light_off",//灯光控制
      noneTest: "加载中"
    };
  },
  computed: {},
  watch: {
    isPause: {
      handler: function (val, oldval) {
        if (val) {
          this.stop();
        } else {
          this.play();
        }
      },
    },
  },
  methods: {
    onDropdown(e) {
      // console.log(e);
      this.lamplight = e;
      this.cloudControl(e);
    },
    cloudControl(command) {
      if (['reverse', 'light_on', 'light_off', 'light_auto', 'spin_top', 'spin_left', 'spin_bottom', 'spin_right'].indexOf(command) !== -1) {
        this.player.sendCommand(command);
      } else {
        alert("不支持的云台指令")
      }
    },
    // imei查询告警视频列表
    async getPlayList(imei) {
      const res = await reqPlayList(1, 99, imei);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      console.log("res111", res);
      this.playList = res.data.rows
    },
    // onplayback(){
    //     this.$refs.refplayback.dialogPlayback=true;
    // },
    // 告警id查询告警视频列表
    async getAlarmPlay(id) {
      const res = await reqAlarmPlay(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      console.log(res, "res111");
      if (res.data.row.length == 0) {
        this.alarmPlayFlag = false;
        return;
      }
      this.alarmPlayFlag = true;
      this.alarmPlayList = res.data.row;
    },
    // 点击取消和关闭按钮
    cancelAddDia() {
      this.t &&
        this.t
          .loginOut(this.token)
          .then((res) => {
            // console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      this.noneTest = "加载中"
      this.isPause = true;
      this.dialogVisible = false;
      // this.destroy()//销毁播放器
    },
    init(deviceId) {
      var t = new Api();
      // console.log(t);
      // 登录
      // t.login('18194005618', 'Yl86503860@').then(res => {
      // t.login('787814981@qq.com', 'qwe123').then(res => {
      t.login("yuanliu@hongshi.com", "yuanliuhongshi")
        .then((res) => {
          // console.log(res);
          if (res.result == 0) {
            this.token = res.token;
            // 获取设备列表
            t.getDeviceList(res.token)
              .then((res) => {
                // console.log(res);
                if (res.result == 0) {
                  this.server_ip = res.server_ip;

                  // 43176050 39623600 14998052 35890596 39508455
                  // 获取播放地址并初始化api播放
                  t.requestPlayAddress(this.token, deviceId, this.server_ip, 1)
                    .then((res) => {
                      console.log(res, "res");
                      if (res.code === 1000) {
                        this.codec = res.codec;
                        this.play_token = res.play_token;

                        // // width,height 移动端h5根据res.width, res.height比例进行适配,codec为4时，传入的width,height就是canvas的宽高
                        // let pageWidth = this.$refs.page.clientWidth;
                        // let pageHeight = this.$refs.page.clientHeight;
                        // console.log(pageWidth, pageHeight);
                        let width = res.width;
                        let height = res.height;
                        console.log('width', width);
                        console.log('height', height);
                        this.player = t.init(
                          this.codec,
                          this.server_ip,
                          this.play_token,
                          width,
                          height
                        );
                        if (!this.player) {
                          //   alert("您的浏览器不支持WebAssembly，不支持播放");
                        } else {
                          //   alert("api播放初始化完成");
                          // this.play()
                          this.isPause = false;
                        }
                        console.log(this.player);
                      } else {
                        this.noneTest = res.err;
                        // this.$modal.notifyWarning(res.err);
                      }
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    play() {
      this.player.play("265Player", false);
      this.timer = "";
    },

    stop() {
      this.player.stop();
      // this.stopPromiseshow = true;
    },
    cloudControl(command) {
      if (
        [
          "reverse",
          "light_on",
          "light_off",
          "light_auto",
          "spin_top",
          "spin_left",
          "spin_bottom",
          "spin_right",
        ].indexOf(command) !== -1
      ) {
        this.player.sendCommand(command);
        if (command == "light_on") {
          this.lightStatus = 1001;
        } else if (command == "light_off") {
          this.lightStatus = 1002;
        } else if (command == "light_auto") {
          this.lightStatus = 1003;
        }
        // this.getVideoAddressCtrl();
      } else {
        alert("不支持的云台指令");
      }
      this.isLight = false; //隐藏开关自动等文字
    },
    // 获取播放地址--控制台
    getVideoAddressCtrl() {
      this.t
        .requestPlayAddress(this.token, this.sn, this.server_ip, 1)
        .then((res) => {
          if (res.code == 1002) return alert("设备连接失败,请重试");
          if (
            res.code == 1003 ||
            res.code == 1004 ||
            res.code == 1012 ||
            res.code == 1013
          )
            return alert("无法获取设备信息，请重试");
          if (res.code === 1000) {
            this.codec = res.codec;
            this.play_token = res.play_token;

            // 初始化云台支持类型，前端控制是否显示该类型的云台操作
            this.isSupportLightCtr = res.light_ctrl; // 灯光控制
            // if (res.light_ctrl) {
            //   this.lightStatus = res.light_status; // 若支持灯光控制，初始灯光状态,（1001开启，1002关闭，1003自动）
            // }
            this.isSupportReverseCtr = res.reverse_ctrl; // 翻转
            this.isSupportPtzCtr = res.ptz_ctrl; // 运动翻转

            //设备是否在线
            this.t
              .requestDevicesStatus([this.sn], this.server_ip)
              .then((res) => {
                if (res.code == 1000) {
                  this.deviceStatus = res.data[this.sn];
                }
              });

            let width = res.width;
            let height = res.height;
            this.videoHeigth = (res.height * 100) / res.width; //视频高vw
            console.log(this.videoHeigth);
            // console.log("width", width);
            // console.log("height", height);
            this.player = this.t.init(
              this.codec,
              this.server_ip,
              this.play_token,
              width,
              height
            );
            if (!this.player) {
              alert("您的浏览器不支持WebAssembly，不支持播放");
            } else {
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  async created() { },
  mounted() { },
};
</script>

<style lang="less" scoped>
.div_box {
  // height: 79vh;
  // height: calc(100vh - 122px);
  overflow: auto;
  width: 100%;
  display: flex;
  justify-content: center;

  .div_left {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .camara_box {
      width: 100%;
      height: 60vh;
      background: black;
      position: relative;
      box-sizing: border-box;
      cursor: pointer;

      .camara_video {
        z-index: 1;
      }

      .none {
        color: #cfd3ec38;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        font-size: 16px;
      }
    }

    .webplayer_menu {
      background: #0f2c82;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 55px;
      padding: 0 16px;
      box-sizing: border-box;
      position: relative;

      i {
        font-size: 30px;
        cursor: pointer;
      }

      .webplayer-menu--left {
        width: 50%;

        i {
          color: #f1f1f1;
        }
      }

      .webplayer-menu--right {
        width: 50%;
        // padding-left: 10.5%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        i {
          // margin-left: 28px;
          // color: #f1f1f1;
        }
      }
    }

    .huifang {
      display: flex;
      background-color: #e8e8e8;
      border-radius: 20px;
      // margin: 3% auto;
      margin-top: 2%;
      margin-bottom: 2%;

      >div {
        width: 65px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        color: #000000;
        cursor: pointer;

        &:hover {
          color: #409eff;
        }
      }
    }

    .slot_tips_h5player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: auto;
      background: rgba(0, 0, 0, 0.5);
      font-size: 14px;
      display: flex;
      // color: rgba(255, 255, 255, 0.8) !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        font-size: 60px;
      }

      span {
        margin: 7px;
        font-size: 16px;
      }
    }
  }

  .playback {
    position: absolute;
    right: -30%;
    width: 30%;
    top: 55%;
    height: 32vh;
    overflow-y: auto;
    text-align: center;

    >div {
      width: 100%;
      height: 150px;
      padding-bottom: 15px;
      margin-bottom: 20px;

      video {
        width: 100%;
        height: 100%;
      }
    }
  }

  .div_right {
    position: absolute;
    right: -30%;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #5d596c;
    top: 30%;
  }

  .div_zoom {
    position: absolute;
    right: -30%;
    width: 30%;
    top: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;

    >div:nth-of-type(2) {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #f1f1f1;
    }

    >div:first-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }

    >div:last-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .div_focal {
    position: absolute;
    right: -30%;
    width: 30%;
    top: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;

    >div:nth-of-type(2) {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #f1f1f1;
    }

    >div:first-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }

    >div:last-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }
  }
}

::v-deep .video-player {
  // width: 100vw !important;
  width: 100% !important;
}

.video-ctrl-box {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(0, 62, 112, 0.2);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  .ctrl-circle {
    position: absolute;
    width: 70px;
    height: 70px;
    background: #506ab8bd;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;
  }

  i {
    cursor: pointer;
    position: absolute;
    color: #02c3ff;

    &:active {
      color: #409eff;
    }
  }

  .el-icon-caret-left {
    top: 47%;
    left: 27px;
    transform: translateX(-50%) scale(2);
  }

  .el-icon-caret-right {
    top: 48%;
    right: 11px;
    transform: translateX(-50%) scale(2);
  }

  .el-icon-caret-top {
    left: 50%;
    transform: translateX(-50%) translateY(17px) scale(2);
  }

  .el-icon-caret-bottom {
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%) translateY(16px) scale(2);
  }
}

::v-deep .el-dialog__header {
  display: block !important;
  background: #354895;
  border-bottom: 1px solid #06b1e7;

  .el-dialog__title {
    color: #f1f1f1;
  }
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #f1f1f1;
  font-size: 20px;
}

::v-deep .el-dialog__body {
  background: #384e91 !important;
  color: #f1f1f1;
  min-height: 65vh !important;
}

::v-deep .el-dialog {
  //   border: 2px solid #06b1e7;
  //   box-shadow: 0px 0px 10px #06b1e7;
}

.dialog-title {
  display: flex;
  justify-content: center;
  width: 100%;

  .title {
    color: #4eaef2 !important;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-left: 6px;
  }
}
</style>
